<template>
	<div>
		<div class="newRecord ">
			<div class="Style-title-more  flexRow">
				<div class="title">
					<h2>音乐风格</h2>
				</div>
				<div class="more">更多</div>
			</div>
			<!-- 唱片项目 -->
			<div v-for="(item,index) in Data" class="Records  flexRow">
		
				<div class="record-img ">
					<img :src="item.picUrl" />
				</div>
				<div class="record-text flewCol ">
					<div class="onerow ">{{cutString(item.name)}}</div>
					<div class="tworow ">{{cutString(item.copywriter)}}</div>
				</div>
		
		
			</div>
			
		
		</div>
	</div>
</template>

<script>
	export default {
		props:{
			Title:{
				type:String
			},
			Data:{
				type:Array
			}
		},
        name:"",
		data(){
		         return{
				
			   }	
		},
		created() {
			
		},
		methods:{
			
			//减少字数
			cutString(str) {
				if (str) {
					if (str.length > 18) {
						return str.substring(0, 18) + '...'
					}
					return str
				}
			
			
			}
		}
	}
</script>

<style>
	.onerow,.tworow{
		font-size: 12px;
		font-weight: 700;
		color: #000000;
		width: 250px;
		height: 25px;
	}
	.record-text {
		justify-content: space-around;
		z-index: auto;
		width: 250px;
		height: 65px;
		margin: 0 20px;
	}
	
	.record-img {
		z-index: 4;
		width: 65px;
		height: 65px;
	
	}
	.record-img img {
		width: 65px;
		border-radius: 10%;
		overflow: hidden;
	}
	
	.Records {
		border-radius: 10px;
		box-shadow: 3px 3px 5px #b4b4b4;
		z-index: auto;
		width: 355px;
		height: 65px;
		justify-content: space-between;
		margin: 15px auto;
	}
	
	.newRecord {
		border-top: 1px solid #e7e7e7;
		z-index: auto;
		width: 355px;
		height: 100%;
		margin: 0px auto;
	}
</style>
